<template>
  <div id="search-view" :class="{ h5: this.$store.state.webType === 'h5' }">
    <el-row :span="24" class="page">
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{ $t("home") }} </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t("search") }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t("searchResults") }}</el-breadcrumb-item>
      </el-breadcrumb>

      <div :span="24" class="page-content">
        <el-row :span="24" class="art-row">
          <div class="search_page_search_box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="按栏目查询">
                <el-select v-model="formInline.column" placeholder="活动区域">
                  <el-option label="Events" value="Events"></el-option>
                  <el-option label="News" value="News"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="按时间查询">
                <el-input v-model="formInline.time"></el-input>
              </el-form-item>
              <el-form-item label="按发布机构查询">
                <el-input v-model="formInline.source"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="search_result_list_title">
            <div>Search Result</div>
            <div>Total : {{ listTotal }}</div>
          </div>
          <div class="search_result_list_box">
            <div class="news_list_item1" v-for="(itemList, ind) in searchResultList" :key="ind">
              <img height="180" src="../assets/images/news/bottomBan.png" />
              <div class="new_list_item_right">
                <div v-html="itemList.title"></div>
                <div>September&nbsp;24,&nbsp;2023&nbsp;by&nbsp;Secretariat&nbsp;of&nbsp;WFUCA</div>
                <div v-html="itemList.content"></div>
              </div>
            </div>
            <div class="news_list_item1">
              <img height="180" src="../assets/images/news/bottomBan.png" />
              <div class="new_list_item_right">
                <div>
                  Cultural&nbsp;and&nbsp;Historical&nbsp;Heritage&nbsp;of&nbsp;Gold&nbsp;Embroidery&nbsp;of&nbsp;Siberia
                </div>
                <div>September&nbsp;24,&nbsp;2023&nbsp;by&nbsp;Secretariat&nbsp;of&nbsp;WFUCA</div>
                <div>
                  A&nbsp;large-scale continent continent continent continent continent continent
                  continent continent continent continent continent continent continent continent
                  continent continent.
                </div>
              </div>
            </div>
            <div class="news_list_item1">
              <img height="180" src="../assets/images/news/bottomBan.png" />
              <div class="new_list_item_right">
                <div>
                  Cultural&nbsp;and&nbsp;Historical&nbsp;Heritage&nbsp;of&nbsp;Gold&nbsp;Embroidery&nbsp;of&nbsp;Siberia
                </div>
                <div>September&nbsp;24,&nbsp;2023&nbsp;by&nbsp;Secretariat&nbsp;of&nbsp;WFUCA</div>
                <div>
                  A&nbsp;large-scale continent continent continent continent continent continent
                  continent continent continent continent continent continent continent continent
                  continent continent.
                </div>
              </div>
            </div>
            <div class="news_list_item2">
              <div>
                Cultural&nbsp;and&nbsp;Historical&nbsp;Heritage&nbsp;of&nbsp;Gold&nbsp;Embroidery&nbsp;of&nbsp;Siberia
              </div>
              <div>September&nbsp;24,&nbsp;2023&nbsp;by&nbsp;Secretariat&nbsp;of&nbsp;WFUCA</div>
              <div>
                A&nbsp;large-scale continent continent continent continent continent continent
                continent continent continent continent continent continent continent continent
                continent continent.continent continent continent continent continent continent
                continent continent.continent continent continent continent continent continent
                continent continent.
              </div>
            </div>
            <div class="news_list_item2">
              <div>
                Cultural&nbsp;and&nbsp;Historical&nbsp;Heritage&nbsp;of&nbsp;Gold&nbsp;Embroidery&nbsp;of&nbsp;Siberia
              </div>
              <div>September&nbsp;24,&nbsp;2023&nbsp;by&nbsp;Secretariat&nbsp;of&nbsp;WFUCA</div>
              <div>
                A&nbsp;large-scale continent continent continent continent continent continent
                continent continent continent continent continent continent continent continent
                continent continent.continent continent continent continent continent continent
                continent continent.continent continent continent continent continent continent
                continent continent.
              </div>
            </div>
          </div>
          <!-- 右侧{{$t('latest')}} 热点文章 -->
        </el-row>
      </div>
    </el-row>

    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      direction="btt"
      :before-close="handleClose"
      :custom-class="'num-drawer'"
    >
      <img class="num-img" :src="numImg" :alt="drawerTitle" />
    </el-drawer>
  </div>
</template>

<script>
import HotArticle from "@/components/HotArticle";
import NewBook from "@/components/NewBook";

export default {
  name: "Search",
  components: {
    HotArticle,
    NewBook,
  },
  data() {
    return {
      formInline: {
        column: "",
        time: "",
        source: "",
      },
      busy: true,
      nomore: false,

      noneView: false,
      loading: false,
      drawer: false,
      drawerTitle: "",
      numImg: "",
      // {{$t('latest')}}
      bookData: {},
      // 热点文章
      articleData: [],
      // 文章列表
      artData: [],
      // 文章总数量
      listTotal: 0,
      maxPage: 1,
      // 文章列表请求信息
      dateRange: [],
      listQuery: {
        pageSize: 30,
        pageNum: 1,

        value: "",
      },
      searchResultList: [],
    };
  },
  mounted() {
    this.listQuery.value = this.$route.query.value ? this.$route.query.value : "";
    if (this.listQuery.value) {
      this.getList();
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      this.listQuery = {
        ...this.listQuery,
        ...this.formInline,
      };
      console.log(this.listQuery, "listQuery-->");
      this.getList();
    },
    async loadMore() {
      // console.log(
      //   "loadMore",
      //   this.busy || this.listQuery.pageNum >= this.maxPage
      // );
      if (this.busy || this.listQuery.pageNum >= this.maxPage) return;
      this.busy = true;
      this.listQuery.pageNum += 1;
      this.loading = true;
      await this.getList();
    },
    goDetail(item) {
      //  console.log(item.lmName);
      // if (item.lmName == '数说' || item.lmName == 'Numbers') {
      //   this.handleDrawerShow(item);
      // } else {
      this.$goDetail(item.id);
      // }
    },
    handleDrawerShow(item) {
      //  console.log(item);
      this.drawer = true;
      this.drawerTitle = item.title;
      this.numImg = item.imgUrl;
    },
    handleClose(done) {
      done();
    },
    //e为要改变颜色的字符（传入的参数）
    //this.brief是指定的字符串
    searchInfo(e, str) {
      let res = new RegExp("(" + e + ")", "g");
      // let b = document.querySelector(".brief");
      let a;
      a = str.replace(res, "<span style='color: #0046B4'>" + e + "</span>");
      // console.log(a);
      return a;
    },
    getList(one) {
      this.loading = true;

      this.$get(this.$api + "/un/web/essearch", this.listQuery).then((res) => {
        this.searchResultList = res.data;
        this.listTotal = res.total;
        for (let i = 0; i < res.data.length; i++) {
          res.ikNameList.forEach((word) => {
            // console.log(word);
            if (!res.data[i].titleOrg) {
              res.data[i].titleOrg = "";
              res.data[i].titleOrg = this.searchInfo(word.ikName, res.data[i].title);
            } else {
              res.data[i].titleOrg = this.searchInfo(word.ikName, res.data[i].titleOrg);
            }
            if (!res.data[i].detailHtmlOrg) {
              res.data[i].detailHtmlOrg = "";
              res.data[i].detailHtmlOrg += this.searchInfo(
                word.ikName,
                res.data[i].detailHtml.slice(res.data[i].detailHtml.indexOf(word.ikName), -1)
              );
            } else {
              res.data[i].detailHtmlOrg + this.searchInfo(word.ikName, res.data[i].detailHtmlOrg);
            }
          });
          res.data[i].detailHtmlOrg = res.data[i].detailHtmlOrg.replace(
            /<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
            function (match, capture) {}
          );
          // console.log(res.data[i].detailHtmlOrg);
        }
        this.artData = [...this.artData, ...res.data];
        this.loading = false;
        // }, 500);
        this.listTotal = res.total;
        this.maxPage = res.maxPage;
        //  console.log(this.artData);
        if (this.artData.length == 0) {
          this.noneView = true;
        } else {
          this.noneView = false;
        }
        let that = this;
        this.$nextTick(() => {
          that.nomore = true;
          setTimeout(() => {
            that.busy = false;
          }, 300);
        });
      });
    },
    changeLabel(id, label) {
      this.listQuery.labelId = id;
      this.listQuery.pageNum = 1;
      this.currentLabel = label;
      this.artData = [];
      this.getList();
    },
    getLabels() {
      this.$get(this.$api + "/cms/web/getLabelByPartId", {
        partId: this.listQuery.columnId,
      }).then((res) => {
        this.labelData = res.data;
      });
    },
    getListMore() {
      this.listQuery.pageNum += 1;
      this.getList();
    },
    changeBanner(index) {
      this.currentIndex = index;
    },
    viewTypeChange(type) {
      this.currentView = type;
    },
  },
};
</script>
<style>
/*#search-view .art-view .item-content img {*/
/*  display: none !important;*/
/*  overflow: hidden;*/
/*}*/
</style>
<style lang="scss" scoped>
::v-deep .el-loading-mask {
  top: 200px;
  left: 50%;
  bottom: auto;
  transform: translateX(-50%);
}

#search-view {
  position: relative;
  width: 100%;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: fh(930vh, pc);
    // background: url("../assets/images/search-bg.jpg") no-repeat;
    background-size: 100% auto;
    background-position: center 0;
  }

  ::v-deep .num-drawer {
    height: fh(800vh, pc) !important;
    background-color: rgba(46, 46, 46, 0.8);

    .el-icon-close:before {
      color: #fff;
    }

    .num-img {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 100%;
    }
  }

  .page {
    padding: fh(152vh, pc) fw(80vw, pc) 0 fw(80vw, pc);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, #ffffff 100%);
    min-height: fh(100vh, pc);

    ::v-deep .el-breadcrumb {
      // margin-left: fw(-40vw, pc);
      .el-breadcrumb__inner {
        font-weight: bold;
        color: #fff !important;
        font-size: fh(18vh, pc);
      }
    }
  }

  .page-content {
    position: relative;
    margin-top: fh(0vh, pc);
    padding: 0 0 fh(40vh, pc) 0;
  }

  .view-line {
    width: fw(1160vw, pc);
    display: flex;
    align-items: center;
    background: #f6f6f6;
    padding: fw(40vw, pc);
    padding-bottom: 0;

    .search-key {
      font-size: fh(24vh, pc);
      font-weight: bold;
      color: #2e2e2e;
    }

    .search-input {
      flex: 1;
      font-size: fh(14vh, pc);
      height: fh(48vh, pc);
      line-height: fh(48vh, pc);
      margin-right: fw(20vw, pc);
    }

    .search-btn {
      width: fw(120vw, pc);
      height: fh(48vh, pc);
      color: #fff;
      line-height: fh(48vh, pc);
      background: #0046b4;
      font-size: fh(14vh, pc);
      text-align: center;
      border-radius: 10px;
      margin-left: 12px;

      &:hover {
        opacity: 0.8;
        cursor: pointer;
      }
    }
  }

  .art-row {
    display: flex;
    flex-wrap: wrap;
    padding-top: fh(20vh, pc);
    width: 100%;

    .book-content {
      background-color: $fh90;
      padding-bottom: fh(40vh, pc);

      .book-btn {
        display: flex;
        width: 100%;
        align-items: flex-end;
        justify-content: center;

        img {
          width: fw(180vw, pc);

          &:hover {
            cursor: pointer;
            opacity: 0.7;
          }
        }
      }

      .book-row {
        display: flex;
        width: 100%;
        padding: fh(46vh, pc) fw(20vw, pc);
        color: $sh;

        img.book-img {
          width: fw(280vw, pc);
        }

        .book-text {
          padding-left: fw(10vw, pc);

          .view-label {
            color: $zh;
            position: relative;
            display: inline-block;
            font-size: fh(24vh, pc);
            font-weight: 800;
            margin-top: fh(20vh, pc);
            margin-bottom: fh(60vh, pc);

            &::after {
              content: "";
              position: absolute;
              bottom: fh(-16vh, pc);
              right: fw(-12vw, pc);
              width: fw(30vw, pc);
              height: fh(18vh, pc);
              border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
              border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
            }
          }

          .text-item {
            padding-bottom: fh(30vh, pc);

            .item-title {
              color: $sh;
              font-size: fh(18vh, pc);
              font-weight: bold;
              padding-bottom: fh(20vh, pc);
            }

            .item-content {
              font-size: fh(16vh, pc);
              line-height: fh(26vh, pc);
            }
          }
        }
      }
    }

    .row-right {
      display: flex;
      flex: 1;
      margin-left: fw(20vw, pc);
      flex-flow: column;
      position: absolute;
      right: 0;
      top: fh(0vh, pc);
      width: fw(560vw, pc);

      .hot-article {
        width: 100%;
        padding: fh(30vh, pc) fw(30vw, pc);
        background-color: $fh90;
        margin-top: 0;

        .article-label {
          color: $zh;
          position: relative;
          display: inline-block;
          font-size: fh(24vh, pc);
          font-weight: 800;
          margin-top: fh(20vh, pc);
          margin-bottom: fh(60vh, pc);

          &::after {
            content: "";
            position: absolute;
            bottom: fh(-16vh, pc);
            right: fw(-12vw, pc);
            width: fw(30vw, pc);
            height: fh(18vh, pc);
            border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
            border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
          }
        }

        .article-view {
          color: $sh;

          .article-item {
            width: fw(485vw, pc);
            line-height: fh(26vh, pc);
            margin-bottom: fh(26vh, pc);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            span {
              color: $zh;
              font-size: fh(18vh, pc);
              font-weight: bold;
              display: inline-block;
              padding-right: fw(16vw, pc);
            }

            &:hover {
              opacity: 0.8;
              cursor: pointer;
              color: $zh;
            }
          }
        }
      }
    }
  }

  .art-col {
    position: relative;
    width: fw(1160vw, pc);
    background: #f6f6f6;

    .art-view {
      // width: 100%;
      // display: flex;
      // flex-direction: column;
      // flex-wrap: wrap;
      // height: 1800px;
      min-height: fh(1600vh, pc);
      column-count: 3; //想要排成的列数
      column-gap: fw(20vw, pc);
      padding: fw(40vw, pc);
      cursor: pointer;
      // display: grid;
      // grid-gap: fw(20vw, pc);
      // grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
      // grid-auto-rows: minmax(10px, auto);
      // grid-auto-flow: dense;
      &.text {
        column-count: 1;
        column-gap: 0;

        .item-title {
          color: $sh;
          display: flex;
          width: 100%;

          .title-text {
            flex: 1;
          }

          .item-info {
            margin-left: auto;
            width: auto !important;

            .info-time {
              margin-left: fh(60vh, pc);
            }
          }
        }
      }

      .art-item {
        break-inside: avoid;
        // width: 32%;
        // height: auto;
        // position: absolute;
        margin-bottom: fh(20vh, pc);
        // background-color: $dh;
        border-bottom: 1px solid #d6d6d6;

        &:hover {
          opacity: 0.9;
          background-color: rgba(155, 155, 155, 0.5);
        }

        img {
          width: 100%;
        }

        .art-content {
          width: 100%;
          color: #2e2e2e;
          padding: fh(20vh, pc) fw(20vw, pc);
          position: relative;
          z-index: 2;

          .item-title {
            color: $sh;
            font-size: fh(16vh, pc);
            line-height: fh(20vh, pc);
            font-weight: 600;
            color: #2e2e2e;
          }

          .item-info {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
            margin-bottom: fh(0vh, pc);
            font-size: fh(14vh, pc);
            line-height: fh(20vh, pc);

            .info-time {
              color: #429fb4;
            }
          }

          .item-content {
            margin-top: fh(8vh, pc);
            font-size: fh(14vh, pc);
            line-height: fh(21vh, pc);
            height: fh(20vh, pc);
            font-weight: 400;
            width: 100%;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
          }
        }
      }
    }

    .art-more {
      width: max-content;
      margin: fh(40vh, pc) auto;
      color: rgb(0, 0, 0);
      font-size: fh(14vh, pc);

      &.true:hover {
        cursor: pointer;
        opacity: 0.8;
        color: $zh;
      }

      &.none {
        position: relative;
        top: 20px;
        opacity: 0.9;
      }
    }
  }

  .banner-view {
    display: flex;
    width: 100%;
    margin-top: fh(16vh, pc);

    .banner-col {
      width: fw(1180vw, pc);
      margin-right: fw(20vw, pc);

      .col-text {
        display: flex;
        // align-items: center;
        .text-item {
          flex: 1;
          color: #fff;
          padding: fh(20vh, pc) fw(20vw, pc);
          background-color: $dh;
          font-size: fh(16vh, pc);
          line-height: fh(24vh, pc);
          margin: 0 fw(2vw, pc);

          &.active {
            background-color: $zh;
          }

          &:nth-child(1) {
            margin-left: 0;
          }

          &:nth-last-child(1) {
            margin-right: 0;
          }

          &:hover {
            opacity: 0.8;
            cursor: pointer;
          }
        }
      }

      .banner-big {
        width: 100%;
        display: block;
      }
    }

    .int-col {
      flex: 1;
      overflow: hidden;
      background-color: rgba(15, 0, 0, 0.5);

      .int-content {
        padding: fh(20vh, pc) fw(20vw, pc);

        .content-title {
          font-size: fh(24vh, pc);
          font-weight: 800;
          color: #a1b8bd;
          line-height: fh(35vh, pc);

          &:hover {
            cursor: pointer;
            opacity: 0.8;
          }
        }

        .content-import {
          margin-top: fh(40vh, pc);
          position: relative;
          color: #d6d6d6;
          padding: fh(24vh, pc) fw(20vw, pc);
          padding-bottom: fh(16vh, pc);
          background-color: rgba(255, 255, 255, 0.5);
          font-size: fh(16vh, pc);
          font-weight: 800;
          line-height: fh(24vh, pc);

          &::before {
            content: "“";
            font-family: cursive;
            position: absolute;
            font-size: fh(60vh, pc);
            left: fh(-20vw, pc);
            top: fh(5vh, pc);
            color: $zh;
          }

          &::after {
            content: "”";
            font-family: cursive;
            position: absolute;
            font-size: fh(60vh, pc);
            right: fh(-20vw, pc);
            bottom: fh(-24vh, pc);
            color: $zh;
          }
        }

        .content-html {
          margin-top: fh(50vh, pc);

          p {
            font-size: fh(14vh, pc);
            font-family: "宋体", "songti", "宋体-简", "serif", "sans-serif", "cursive", "fantasy",
              "monospace";
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
            line-height: fh(20vh, pc);
            margin-top: fh(26vh, pc);
          }

          .html-title {
            font-size: fh(16vh, pc);
            font-weight: bold;
            color: #ffffff;
            line-height: fh(24vh, pc);
          }
        }
      }

      .label-view {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        padding: fh(40vh, pc) fw(20vw, pc) fh(28vh, pc) fw(20vw, pc);
        border-bottom: 1px solid #fff;

        .int-label {
          color: #d6d6d6;
          position: relative;
          display: inline-block;
          font-size: fh(24vh, pc);
          font-weight: 800;

          &::after {
            content: "";
            position: absolute;
            bottom: fh(-16vh, pc);
            right: fw(-12vw, pc);
            width: fw(30vw, pc);
            height: fh(18vh, pc);
            border-right: fw(6vw, pc) solid #d6d6d6;
            border-bottom: fw(8vw, pc) solid #d6d6d6;
          }
        }

        .int-more {
          font-size: fh(14vh, pc);
          font-weight: 600;
          line-height: fh(20vh, pc);
          color: rgba(255, 255, 255, 0.5);

          &:hover {
            cursor: pointer;
            color: #fff;
          }
        }
      }
    }
  }
}
.search_page_search_box {
  margin: 0 auto;
  width: 87%;
}
.search_result_list_box {
  margin: 0 auto;
  width: 89%;
  padding-top: 20px;
  .news_list_item1 {
    display: flex;
    margin-bottom: 15px;
    .new_list_item_right {
      padding: 15px;
      div:nth-child(1) {
        height: 30px;
        overflow-wrap: break-word;
        color: rgba(42, 42, 42, 1);
        font-size: 20px;
        font-family: "SourceHanSansCN-Medium";
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
        line-height: 30px;
      }
      div:nth-child(2) {
        height: 14px;
        overflow-wrap: break-word;
        color: rgba(120, 120, 120, 1);
        font-size: 14px;
        font-family: "SourceHanSansCN-Regular";
        font-weight: normal;
        text-align: left;
        white-space: nowrap;
        line-height: 21px;
        margin-top: 13px;
      }
      div:nth-child(3) {
        overflow-wrap: break-word;
        color: rgba(42, 42, 42, 1);
        font-size: 14px;
        font-family: "SourceHanSansCN-Regular";
        font-weight: normal;
        text-align: left;
        line-height: 24px;
        margin-top: 20px;
      }
    }
  }
  .news_list_item2 {
    margin-bottom: 15px;
    div:nth-child(1) {
      height: 30px;
      overflow-wrap: break-word;
      color: rgba(42, 42, 42, 1);
      font-size: 20px;
      font-family: "SourceHanSansCN-Medium";
      font-weight: 500;
      text-align: left;
      white-space: nowrap;
      line-height: 30px;
    }
    div:nth-child(2) {
      height: 14px;
      overflow-wrap: break-word;
      color: rgba(120, 120, 120, 1);
      font-size: 14px;
      font-family: "SourceHanSansCN-Regular";
      font-weight: normal;
      text-align: left;
      white-space: nowrap;
      line-height: 21px;
      margin: 12px 0 25px 0;
    }
    div:nth-child(3) {
      overflow-wrap: break-word;
      color: rgba(42, 42, 42, 1);
      font-size: 14px;
      font-family: "SourceHanSansCN-Regular";
      font-weight: normal;
      text-align: left;
      line-height: 24px;
    }
  }
}
.search_result_list_title {
  border-bottom: 1px solid #aaa;
  height: 55px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 89%;
  div:nth-child(1) {
    font-weight: 600;
    text-align: left;
    line-height: 24px;
    overflow-wrap: break-word;
    color: rgb(0, 93, 176);
    font-size: 23px;
    font-family: "SourceHanSansCN-Medium";
  }
  div:nth-child(2) {
    overflow-wrap: break-word;
    color: rgba(42, 42, 42, 1);
    font-size: 14px;
    font-family: "SourceHanSansCN-Regular";
    font-weight: normal;
    text-align: left;
    line-height: 24px;
  }
}
</style>
